<script setup>
	import { ref, reactive, onMounted, onBeforeUnmount, nextTick, toRaw } from 'vue'
	import modal from '../modal/modal.vue'
	const modalRef = ref(null)

	const data = reactive({
		custom: true,
		content: '',
		maskBackground: 'rgba(0,0,0,0)',
		maskClick: false,
		mask: true,
		color: 'white',
		background: 'rgba(0,0,0,0)'
	})

	const rawData = toRaw(data)

	// TODO 读取原始数据
	const open = (option) => {
		Object.assign(data, option || rawData)
		// console.log(rawData, data)
		modalRef.value.open()
	}
	const close = () => {
		modalRef.value.close()
	}

	defineExpose({
		open, close
	})

	onMounted(() => {
		nextTick(() => {
			window.addEventListener('hashchange', close)
		})
	})

	onBeforeUnmount(() => {
		window.removeEventListener('hashchange', close)
	})
</script>

<template>
	<modal ref="modalRef" :custom="data.custom" :mask-background="data.maskBackground" :mask-click="data.maskClick" :mask="data.mask">
		<div class="o-pop-loading" :style="{background: data.background}">
			<div class="o-pop-loading__cont">
				<div class="loading">
					<span class="loading-item"></span>
				</div>
				<div>{{data.content}}</div>
			</div>
		</div>
	</modal>
</template>

<style lang="scss" scoped>
	.o {
		&-pop-loading {
			text-align: center;
			padding: 30px;
			border-radius: 8px;
			box-sizing: border-box;

			&__cont {
				font-size: .75em;

				@keyframes contScale {
					100% {
						transform: scale(10);
						opacity: 0;
					}
				}

				.loading {
					box-sizing: unset;
					color: RGB(0 0 0 / 0);
					border-radius: 100%;
					width: 2rem;
					height: 2rem;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						top: 25%;
						left: 25%;
						background: rgb(0 0 0 / .1);
						width: 50%;
						height: 50%;
						border-radius: 50%;
						transform: scale(0);
						animation: contScale 1s infinite ease-in-out;
					}


					&-item {
						position: relative;
						z-index: 2;
						display: inline-flex;
						width: 2rem;
						height: 2rem;
						border: calc(2rem / 10) solid rgb(0 0 0 / .75);
						border-top-color: currentColor;
						vertical-align: -calc(2rem / 3);
						border-radius: 100%;
						box-sizing: border-box;
						animation: oSpin .7s linear infinite;
					}
				}
			}
		}
	}

	@keyframes oSpin {
		to {
			transform: rotate(360deg);
		}
	}
</style>